<template>
 <div class="list">
     <div class="item" 
     v-for="item of letters" 
     :key="item"
     :ref="item"
     @click="letterClick"
     @touchstart="touchStart"
     @touchend="touchEnd"
     @touchmove="touchMove"
     >{{item}}</div> 
 </div>
</template>
<script>
 export default {
   props:{
       cities:Object
   },
   data () {
     return {
         startTouch:false,
         startY:0,
         timer:null
     }
   },
   updated() {
       this.startY=this.$refs['A'][0].offsetTop
   },
   computed:{
       letters(){
           let letters=[]
           for(let i in this.cities){
               letters.push(i)
           }
           console.log(letters)
           return letters
       }
   },
   methods:{
       letterClick(e){
           this.$emit("change",e.target.innerText)
       },
       touchStart(){
           this.startTouch=true
           console.log('开始')
       },
       touchMove(e){
           if(this.startTouch){
               if(this.timer){
                   clearTimeout(this.timer)
               }
               this.timer=setTimeout(()=>{
                    const moveY=e.touches[0].clientY-79
                    const index=Math.floor((moveY-this.startY)/20)
                    if(index>=0&&index<this.letters.length){
                        this.$emit("change",this.letters[index])
                    }
               },16)
              
               
           }
       },
       touchEnd(){
            this.startTouch=false
            console.log('结束')
       },
   },
   components: {
   }
 }
</script>
<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
    .list
        position absolute
        top 1.58rem
        right 0
        bottom 0
        width .4rem
        display flex
        flex-direction column
        justify-content center
        .item
            text-align center
            line-height 0.4rem
            color $bgColor
</style>

